<template>
    <div class="article-item-page">
        <van-cell class="article-item" v-for="e in dataList" :key="e.id" @click="enter(e.id)">
            <template #title>
                <div class="head">
                    <img
                        :src="e.avatar"
                        alt=""/>
                    <div class="con">
                        <p class="title van-ellipsis">{{ e.stem }}</p>
                        <p class="other">{{ e.creator }} | {{ e.createdAt }}</p>
                    </div>
                </div>
            </template>
            <template #label>
                <div class="body van-multi-ellipsis--l2">
                    {{ e.content.replace(/<.*?>/g, '') }}
                </div>
                <div class="foot">点赞 {{ e.likeCount }} | 浏览 {{ e.views }}</div>
            </template>
        </van-cell>
    </div>
</template>

<script>
export default {
    props: {
        dataList: Array
    },
    data () {
        return {}
    },
    methods: {
        enter(id) {
            this.$router.push(`/detail/${id}`)
        }
    }
}
</script>

<style scoped lang="less">


.article-item {
    .head {
        display: flex;

        img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            overflow: hidden;
        }

        .con {
            flex: 1;
            overflow: hidden;
            padding-left: 10px;

            p {
                margin: 0;
                line-height: 1.5;

                &.title {
                    width: 280px;
                }

                &.other {
                    font-size: 10px;
                    color: #999999;
                }
            }
        }
    }

    .body {
        font-size: 14px;
        color: #666666;
        line-height: 1.6;
        margin-top: 10px;
    }

    .foot {
        font-size: 12px;
        color: #999999;
        margin-top: 10px;
    }
}
</style>
